<template>
  <div class="box">
    <el-table :data="list" border :row-class-name="tableColor">
      <el-table-column label="项目单号" prop="orderCode" align="center" />
      <el-table-column label="名称" prop="projectName" align="center" />
      <el-table-column label="项目类型" prop="productAttributes" align="center" />
      <el-table-column label="主治医生" prop="attendingDoctor" align="center" />
      <el-table-column label="金额" prop="price" align="center" />
      <el-table-column label="收款时间" prop="collectionTime" min-width="120" align="center" />
      <el-table-column label="开单人" prop="orderMan" align="center" />
      <el-table-column label="状态" prop="status" align="center" />
      <!-- <el-table-column label="剩余有效期" prop="approveStatu" /> -->
      <el-table-column label="剩余次数" prop="usageCount" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="$parent.viewProject(scope.row, details.id)"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :page-num="params.page"
      :page-size="params.pageSize"
      :on-change="handlePaginationChange"
      :total="total"
    />
  </div>
</template>
<script>
import { tableColor } from '@/utils/common.js';
export default {
  props: {
    details: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      list: [],
      tableColor,
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
    };
  },
  mounted() {
    if (this.details) {
      this.handlePaginationChange(this.params);
    }
  },
  methods: {
    handlePaginationChange(val) {
      this.params = {
        page: val.pageNum,
        pageSize: val.pageSize,
      };
      this.getDataPage();
    },
    async getDataPage() {
      this.loading = true;
      const res = await this.$api["department/projectmenu/projectList"]({
        ...this.params,
        query: { customerId: this.details.id },
      });
      this.loading = false;
      if (res.code !== 200) return this.$message.error("查询项目列表失败！");
      this.list = res.data.result;
      this.total = res.data.total;
    },
  },
};
</script>
<style lang="scss" scoped>
.margin-top {
  margin-top: 20px;
}
.put-itAway {
  cursor: pointer;
}
.margin-left {
  margin-left: 10px;
}
</style>
